<template>
    <el-container>

        <!--侧边栏-->
        <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529;">

            <div style="height: 60px;  color: white; display: flex; align-items: center; justify-content: center;">
                <img src="@/assets/img_1.png" alt="" style="width: 40px; height: 40px; ">
                <span class="logo-title"  v-show="!isCollapse">仓库总管界面</span>
            </div>

            <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" style="border: none;" default-active="/home">
                <el-menu-item @click="inventory" index="/inventory">
                    <el-icon><Box /></el-icon>
                    <span slot="title">库存</span>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <el-container>

            <!--头部-->
            <el-header>
                <div style="margin-left: 1020px;margin-top: 9px">
                    <el-dropdown>
                        <el-avatar> {{role}}</el-avatar>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="logout">退出</el-dropdown-item>

                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                        <el-icon @click="handleCollapse" class="actionButton"><Operation /></el-icon>

                          <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
                            <el-breadcrumb-item v-for="(item,index) in $route.matched" :key="index" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>

                          </el-breadcrumb>

            </el-header>

            <!--主体-->
            <el-main>
                <RouterView />
            </el-main>

        </el-container>

    </el-container>

</template>

<script  setup>
    import { ref } from 'vue';
    import {logout} from '@/net'
    import router from "@/router";
    import {Menu,HomeFilled,Box,Operation,ArrowRight} from '@element-plus/icons-vue'
    const isCollapse = ref(false);
    const asideWidth = ref('200px');
    const role=ref(sessionStorage.getItem('role'))
    const handleCollapse = () => {
        isCollapse.value = !isCollapse.value;
        asideWidth.value = isCollapse.value ? '80px' :'200px'
    };

    const inventory=()=>{
        router.push({
            name:'inventory'
        })
    }

</script>

<style>
    .logo-title{
        margin-left: 5px;
        font-size: 20px;
        transition: width .3s;
    }
</style>